<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 14:36
 * Desc: 分享到微信 share-wx
 */
-->
<template>
  <yy-page class="share-wx">
    <view class="share-wx__content">
      <view class="share-wx__middle">
        <view class="b fs32 ml30 mb20">选择分享显示图片</view>
        <view class="share-wx__big-img">
          <image mode="aspectFill" v-if="activeSrc" style="width: 100%; height: 100%" :src="activeSrc" />
        </view>
        <scroll-view scroll-x class="share-wx__imgs">
          <view class="share-wx__img mr" v-for="(item, index) in info.shareImage" :key="index" @click="onClick(item, index)" :class="{ 'share-wx__img--active': active === index }">
            <image :src="item" style="width: 100%; height: 100%" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
      <view class="share-wx__poster" v-if="isbegin">
        <custom-poster :obj="{ ...obj, image: this.activeSrc }" @getShareImage="getShareImage"></custom-poster>
      </view>
      <view class="share-wx__footer">
        <view class="share-wx__btn-friend">
          <!-- #ifdef MP-WEIXIN -->
          <u-button open-type="share" color="linear-gradient(135deg, #55baff 0%, #23e6d8 100%)" shape="circle" text="分享到微信"></u-button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <u-button @click="handelH5Share" color="linear-gradient(135deg, #55baff 0%, #23e6d8 100%)" shape="circle" text="分享到微信"></u-button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <share-mark :show="show" @close="show = false"></share-mark>
  </yy-page>
</template>
<script>
  import { locShare } from '@/utils/locStore/data'
  import CustomPoster from './CustomPoster.vue'
  // #ifdef H5
  // import shareMark from '@/components/ShareBox/shareMark.js'
  import shareMark from '@/components/ShareBox/shareMark.vue'
  import { getOssImg } from '@/utils/index'
  import { updateAppMessageShareData, updateTimelineShareData } from '@/utils/sdk/index.js'
  import { getShareUrl } from '@/components/ShareBox/tools'
  // #endif
  export default {
    components: {
      // #ifdef H5
      shareMark,
      // #endif
      CustomPoster
    },
    name: 'share-wx',
    data() {
      return {
        show: false,
        info: {},
        active: 0,
        obj: {
          type: '',
          id: ''
        },
        showUser: '',
        shareImage: '',
        isbegin: false
      }
    },
    onLoad(options) {
      this.obj = options
      this.obj = Object.assign({}, this.obj, locShare.get())
      this.showUser = this.obj.showUser
      console.log(this.obj, '====obj')
    },
    onReady() {
      this.init()
    },
    onShareAppMessage() {
      const res = this.handleShareQuery()
      return {
        title: res.desc,
        path: res.path,
        imageUrl: this.shareImage
      }
    },
    methods: {
      init() {
        this.getShareMaterial()
      },
      handleShareQuery() {
        const desc = ['normal', 'coupon'].includes(this.obj.type) ? this.info.name : '这里购票好便宜！'
        const { jumpUrl, shareQuery } = this.$auth.getShareInfo(this.obj)
        // const goodDetailIdUrl = ['normal', 'coupon'].includes(this.obj.type)
        //   ? `mallCommodityId=${this.obj.id}&`
        //   : ''
        // console.log(`${jumpUrl}?${goodDetailIdUrl}shareQuery=${shareQuery}`)
        this.$auth.getShareCount()
        return {
          desc,
          jumpUrl,
          path: `${jumpUrl}?sq=${shareQuery}`,
          shareQuery
        }
      },
      handelH5Share() {
        const res = this.handleShareQuery()
        const option = {
          title: res.desc,
          desc: res.desc,
          link: res.path,
          imgUrl: this.shareImage || getOssImg('logo')
        }
        const o = getShareUrl(option)
        console.log('options:', option, '======')
        this.handelShare(o)
        this.show = true

        // shareMark.show(option)
      },
      onClick(item, index) {
        this.isbegin = false
        this.$nextTick(() => {
          this.active = index
          this.isbegin = true
        })
      },
      getShareMaterial() {
        uni.$api.distribution
          .getShareMaterial({
            type: ['coupon', 'normal'].includes(this.obj.type) ? '2' : '1',
            id: this.obj.id
          })
          .then((res) => {
            this.info = res
            this.isbegin = true
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      },
      // #ifdef H5
      handelShare(options) {
        // const o = getShareUrl(options)
        // this.options = o
        console.log('options转化:', options, '0:789654')
        return Promise.all([this.handleShareFriend(options), this.handleShareGroup(options)])
      },

      handleShareFriend(options) {
        return updateAppMessageShareData(options).then((res) => {
          console.log('分享成功', res)
          return res
        })
      },

      handleShareGroup(options) {
        return updateTimelineShareData(options).then((res) => {
          console.log('分享成功', res)
          return res
        })
      },
      // #endif
      getShareImage(val) {
        this.shareImage = val
      }
    },
    computed: {
      activeSrc() {
        return this.info.shareImage && this.info.shareImage.length > 0 ? this.info.shareImage[+this.active] : ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .share-wx {
    &__content {
      border-top: 1px solid #e9e9e9;
      margin-bottom: 55upx;
    }
    // &__header {
    //   margin-bottom: 20upx;
    //   padding: 42upx 30upx 51upx 30upx;
    //   background: #ffffff;
    //   letter-spacing: 2upx;
    // }
    &__qr-sizes {
      letter-spacing: 0upx;
      display: flex;
      justify-content: space-between;
    }
    &__qr-size {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 332upx;
      height: 150upx;
      border: 1upx solid #e9e9e9;
      border-radius: 10upx;
    }

    &__middle {
      background: #ffffff;
      padding: 35upx 0 39upx;
      margin-bottom: 31upx;
    }
    &__big-img {
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 25upx;
      width: 685upx;
      height: 685upx;
      border-radius: 20upx;
    }
    &__imgs {
      width: calc(100% - 30upx);
      padding-left: 30upx;
      white-space: nowrap;
    }
    &__img {
      box-sizing: border-box;
      overflow: hidden;
      margin-right: 21upx;
      display: inline-block;
      width: 150upx;
      height: 150upx;
      border-radius: 20upx;
    }
    &__img--active {
      position: relative;
      border: 6upx solid #52bdfd;
    }
    &__img--active::after {
      content: '';
      position: absolute;
      bottom: -5upx;
      right: -5upx;
      width: 50upx;
      height: 50upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/activeImg.png) no-repeat;
      background-size: 100%;
    }

    &__footer {
      position: relative;
      display: flex;
      padding: 0 20upx 0 30upx;
    }
    &__btn-share {
      margin-right: 20upx;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100upx;
      height: 100upx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 18upx;
      color: #ffffff;
      font-size: 22upx;
    }
    &__share-img {
      margin: 19upx 0 7upx;
      width: 42upx;
      height: 36upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/share-btn.png) no-repeat;
      background-size: 100%;
    }
    &__btn-friend {
      // width: 600upx;
      position: fixed;
      bottom: 55upx;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
    }
    &__poster {
      position: absolute;
      z-index: -1;
      left: -99999999999px;
    }
  }
</style>
